<template>
  <div>
    <!--文本框组件-->
    <div style="display: flex;justify-content: center; margin-top: 10px">
      <el-input @keydown.enter.native="onSearch" v-model="keywords" style="width: 400px;margin-right: 10px" prefix-icon="el-icon-search" placeholder="通过用户名搜索用户..."></el-input>
      <el-button @click="onSearch" type="primary" icon="el-icon-search">搜索</el-button>
    </div>

    <!--用户信息卡片-->
    <div class="admin-container">
      <el-card class="admin-card" v-for="(admin,index) in admins" :key="admin.id">
        <div slot="header" class="clearfix">
          <span>{{ admin.name }}</span>
          <el-button @click="onDelete(admin)" style="float: right; padding: 3px 0;color: red" type="text" icon="el-icon-delete"></el-button>
        </div>
        <div>
          <!--头像-->
          <div class="img-container">
            <img class="userface-img" :src="admin.userFace" :alt="admin.name" :title="admin.name">
          </div>
          <!--用户信息-->
          <div class="userinfo-container">
            <div>用户名：{{ admin.name }}</div>
            <div>手机号码：{{ admin.phone }}</div>
            <div>电话号码：{{ admin.telephone }}</div>
            <div>地址：{{ admin.address }}</div>
            <div>
              用户状态：
              <el-switch
                  @change="enabledChange(admin)"
                  v-model="admin.enabled"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="启用"
                  inactive-text="禁用">
              </el-switch>
            </div>
            <!--用户角色-->
            <div>
              用户角色：
              <el-tag style="margin-right: 10px" type="success" v-for="(role, index) in admin.roles" :key="role.nameZh">
                {{ role.nameZh }}
              </el-tag>

              <!--角色列表弹出框-->
              <el-popover
                  placement="right"
                  title="角色列表"
                  width="200"
                  @show="showPop(admin)"
                  @hide="hidePop(admin)"
                  trigger="click">
                <el-select v-model="selectRoles" multiple placeholder="请选择">
                  <el-option
                      v-for="(role, index) in allRoles"
                      :key="role.nameZh"
                      :label="role.nameZh"
                      :value="role.id">
                  </el-option>
                </el-select>
                <el-button type="text" slot="reference" icon="el-icon-more"></el-button>
              </el-popover>
            </div>
            <div>
              备注：{{ admin.remark }}
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "SysAdmin",
  data(){
    return {
      admins: [],
      keywords: '',
      allRoles: [],
      selectRoles: []
    }
  },
  methods: {
    //初始化数据
    initAdmins(){
      this.getRequest('/system/admin/').then(res => {
        if (res){
          this.admins = res
        }
      })
    },
    //初始化所有角色
    initAllRoles(){
      this.getRequest('/system/admin/roles').then(res => {
        if (res){
          this.allRoles = res
        }
      })
    },
    //弹出角色列表框时
    showPop(admin){
      this.initAllRoles()
      let roles = admin.roles
      this.selectRoles = []
      roles.forEach(role => [
          this.selectRoles.push(role.id)
      ])
    },
    //角色列表框隐藏时发送更新角色请求
    hidePop(admin){
      let roles = []
      //复制当前用户的角色，和选中的进行判断
      Object.assign(roles, admin.roles)
      let flag = false
      //判断长度是否不同
      if (roles.length != this.selectRoles.length){
        flag = true
      }else {
        //长度相等，id不同，双循环判断
        for (let i = 0; i <roles.length; i++) {
          let role = roles[i]
          for (let j = 0; j < this.selectRoles.length; j++) {
            let selectRole = this.selectRoles[j]
            if (role.id == selectRole){
              roles.splice(i, 1)
              //防止移除后跳过后面的一个值
              i--
              break
            }
          }
        }
        if (roles.length != 0){
          flag = true
        }
      }
      //判断改变才发请求，否则不发
      if (flag){
        //构造url地址
        let url = '/system/admin/role?adminId=' + admin.id
        this.selectRoles.forEach(id => {
          url += '&rids=' + id
        })
        //发送更新请求
        this.putRequest(url).then(res => {
          if (res) {
            this.initAdmins()
          }
        })
      }
    },
    //搜索用户名
    onSearch(){
      this.getRequest('/system/admin/?keywords=' + this.keywords).then(res => {
        if (res){
          this.admins = res
        }
      })
    },
    //修改是否启用
    enabledChange(admin){
      this.putRequest('/system/admin/', admin).then(res => {
        if (res){
          this.initAdmins()
        }
      })
    },
    //删除
    onDelete(admin){
      this.$confirm('此操作将永久删除' + admin.name  + '操作员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
       this.deleteRequest('/system/admin/' + admin.id).then(res => {
         if (res){
           //刷出数据
           this.initAdmins()
         }
       })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  mounted() {
    this.initAdmins()
  }
}
</script>

<style scoped>

.admin-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 10px;
}
.admin-card {
  width: 350px;
  margin-bottom: 20px;
}
.userface-img {
  width: 72px;
  height: 72px;
  border-radius: 72px;
}
.img-container {
  width: 100%;
  display: flex;
  justify-content: center;
}
.userinfo-container {
  font-size: 12px;
  color: #409eff;
}


</style>
